<template>
  <div class="s_product_box">
    <div class="s_product_img">
      <img src="../../images/pro_1.jpg" alt="产品1" width="100%"/>
    </div>
    <div class="special_box">
      <ul class="product_adv">
        <li class="product_adv_item">
          <span class="item_icon iconfont el-icon-knife-add_blod"></span>
          <div class="item_info">
            <h2 class="big_tit">新产品体验</h2>
            <span class="small_tit">全新产品体验装</span>
          </div>
        </li>
        <li class="product_adv_item">
          <span class="item_icon iconfont el-icon-knife-anonymous-iconfont"></span>
          <div class="item_info">
            <h2 class="big_tit">高品质保障</h2>
            <span class="small_tit">生产起全严把控</span>
          </div>
        </li>
        <li class="product_adv_item">
          <span class="item_icon iconfont el-icon-knife-rmb"></span>
          <div class="item_info">
            <h2 class="big_tit">超强性价比</h2>
            <span class="small_tit">全高品质低销价</span>
          </div>
        </li>
        <li class="product_adv_item">
          <span class="item_icon iconfont el-icon-knife-search"></span>
          <div class="item_info">
            <h2 class="big_tit">全品类质检</h2>
            <span class="small_tit">全品百分百质检</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="s_product_img">
      <img src="../../images/pro_2.jpg" alt="产品1" width="100%"/>
    </div>
    <div class="s_product_img">
      <img src="../../images/pro_3.jpg" alt="产品1" width="100%"/>
    </div>
    <div class="s_product_img">
      <img src="../../images/pro_4.jpg" alt="产品1" width="100%"/>
    </div>
    <div class="s_product_img">
      <img src="../../images/pro_5.jpg" alt="产品1" width="100%"/>
    </div>
    <!-- 产品购买 -->
    <section class="s_product_buy">
      <h3 class="buy_tit">购买</h3>
      <h2 class="buy_bigtit">50片槽刀片限量购买</h2>
      <div class="s_product_buy_box">
        <div class="s_product_buy_item" v-for="(item, index) in activityList" :key="index">
          <div class="s_product_buy_img">
            <img :src="prefixImg + item.image" :alt="item.goodsName" width="160px" height="160px">
          </div>
          <p class="s_product_buy_type">{{item.goodsName}}</p>
          <p class="s_product_buy_type"> 剩余数量：{{item.stock > 0 ? item.stock : 0}}</p>
          <p class="s_product_buy_type ellipsis">规格型号：{{item.standard}}</p>
          <button :disabled="item.stock === 0" class="s_product_buy_btn" :class="{'not_allow' : item.stock === 0}" @click="openDetail(item)" style="border:none">立即购买</button>
        </div>
      </div>
      <div class="s_product_buy_text">
        <h3>*有机会直接成为优刃区域代理商，享受价格保护政策 </h3>
        <h3>*区域代理商可直接享受一级代理价，利润有保障 </h3>
        <h3>*区域代理商可获得刀具联盟总部百分百销售宣传支持</h3>
      </div>
    </section>
    <!-- 关注公众号 -->
    <section class="s_product_public">
      <img src="../../images/qrcode.jpg" alt="公众号二维码" width="125px" height="125px" />
      <h3 class="s_product_public_bigtit">扫码关注“刀具联盟”公众号</h3>
      <h4 class="s_product_public_tit">了解联盟最新动态，获取更多优惠红包</h4>
    </section>
  </div>
</template>

<script>
import {getActivityId, getActivityList} from '@/service/get-data'
import {prefixImg} from '@/tool/index'
export default {
  data () {
    return {
      activityList: []
    }
  },
  computed: {
    prefixImg () {
      return prefixImg
    }
  },
  methods: {
    async fetchActivityId () {
      let res = await getActivityId()
      if (res.data.resultCode && res.data.resultCode === 2000) {
        this.activityId = res.data.data
        return true
      }
    },
    async fetchActivityList () {
      // 活动id 是否有效
      if (!this.activityId) {
        this.$message.error({
          message: '活动还未开启'
        })
        return
      }
      let res = await getActivityList(this.activityId)
      if (res.data.resultCode && res.data.resultCode === 2000) {
        this.activityList = res.data.data
      } else {
        console.log(res.data.resultMsg)
      }
    },
    openDetail (item) {
      if (item.stock < 1) return
      // let href = location.origin
      // window.open(`${href}/#/productlist/detail/${item.goodsId}`)
      this.$router.push({name: 'productDetail', params: {commodityID: item.goodsId}})
    }
  },
  mounted () {
    this.fetchActivityId().then((res, rej) => {
      this.fetchActivityList()
    })
  }

}
</script>

<style lang="scss" scoped>
  .special_box{
    background: #ffffff;
    
  }
  .s_product_img{
      margin-bottom: -2px;
    }
  .product_adv{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    padding: 50px 0;
    .product_adv_item{
      float: left;
      width: 28%;
      &:last-child{
        width: 15%;
      }
    }
  }
  .item_icon{
    width: 50px;
    height: 50px;
    border: 1px solid #666;
    border-radius: 50%;
    text-align: center;
    float: left;
    font-weight: bold;
    @include fontbase(#666, 18px, 50px)
  }
  .item_info{
    margin-left: 70px;
    margin-top: 6px;
    .big_tit{
      @include fontbase(#333, 16px, 22px);
      margin-bottom: 5px;
    }
    .small_tit{
      @include fontbase(#666, 13px, 18px);
    }
  }
  .s_product_buy{
    background: #FDCE11;
    padding: 100px 0 95px;
    text-align: center;
    .buy_tit{
      @include fontbase(#444444, 24px, 33px);
      margin-bottom: 10px;
    }
    .buy_bigtit{
       @include fontbase(#333, 40px, 56px);
       margin-bottom: 32px;
    }
    .s_product_buy_text{
      width: 460px;
      margin: 0 auto;
      text-align: left;
      padding-left: 52px;
      @include fontbase(#666, 14px, 22px);
    }
  }
  .s_product_buy_box{
    overflow: hidden;
    width: 460px;
    margin: 0 auto 45px;
    .s_product_buy_item{
      float: left;
      width: 45%;
      margin: 0 2.5% 10px;
      text-align: center;
    }
    .s_product_buy_img{
      border: 2px solid #6A6A69;
      border-radius: 10px;
      width: 160px;
      height: 160px;
      margin: 0 auto 10px;
      overflow: hidden;
    }
    .s_product_buy_type{
      text-align: left;
      padding-left: 29px;
      @include fontbase(#333, 14px, 22px);
       margin-bottom: 5px;
    }
    .s_product_buy_btn{
      display: inline-block;
      margin-top: 10px;
      width:198px;
      height:60px;
      line-height: 60px;
      background:rgba(25,25,25,1);
      border-radius:10px;
      text-align: center;
      color: #ffffff;
      font-size: 18px;
      cursor: pointer;
    }
  }
  .s_product_public{
    padding: 50px 0;
    text-align: center;
    background: #f8f8f8;
    .s_product_public_bigtit{
      @include fontbase(#333, 20px, 28px);
      margin: 23px 0 12px;
    }
    .s_product_public_tit{
      @include fontbase(#666, 18px, 25px);
    }
  }
</style>
